<!--
 * @Author: wuyue
 * @Date: 2023-03-01 16:00:41
 * @LastEditTime: 2023-03-16 11:18:19
 * @LastEditors: wuyue
 * @Descripttion: 调入确认
 * @version: 
-->
<template>
  <div>
    <!-- <base-breadcrumb :title="$route.meta.title"> -->
      <a-form-model ref="ruleForm" :model="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" :rules="rules" id="base-breadcrumb" style="position: relative">
        <a-spin :spinning="loading">
          <confirm-form :form="form" :confirmFormFormAttr="confirmFormFormAttr">
            <div style="text-align: right;">
              <a-button :loading="loading" type="primary" @click="handleSubmit"> 确定处理 </a-button>
            </div>
          </confirm-form>
        </a-spin>
      </a-form-model>
    <!-- </base-breadcrumb> -->
  </div>
</template>
<script>
import confirmForm from './components/confirmForm'
import moment from 'moment';
import { getTransferInRecord, transferInConfirm, detailsItem} from '@/api/quality/meterageEquipmentAllocate'

export default {
  components: { confirmForm },
  computed: {
    rules() {
      // 移除调出情况说明必填样式
      const requireDom = document.getElementsByClassName("requiredFormItem")
      if (requireDom.length === 2) {
          requireDom[1].classList.remove("requiredFormItem")
      }
      this.$refs?.ruleForm?.clearValidate('transferInCondition')
      const transferInCondition = [{required: (this.form.receiveState === '2' || this.form.receiveState === '3') && true, message: '请输入调入情况', trigger: 'blur'}]
      return {
        receiveState: [{ required: true, message: '请选择接收情况', trigger: 'change' }],
        transferInCondition,    
      }
    },
  },
  data() {
    return {
      loading: false,
      form: {},
      confirmFormFormAttr: {
        key: 'in',
        title: '计量设备调入确认',
        selectLabel: '接收情况',
        timeLabel: '调入时间',
        remarksLabel: '调入情况说明',
        keyNames: {
          type: 'receiveState',
          transferTime: 'transferInTime',
          transferCondition: 'transferInCondition'
        },
        selectData: [
          {
            label: '已接收',
            value: '1',
          },
          {
            label: '未接收',
            value: '2',
          },
          {
            label: '延迟接收',
            value: '3',
          }
        ],
      }
    }
  },
  created() {
    this.loading = true
    getTransferInRecord({ businessId: this.$route.query.businessId }).then(res => {
      this.form = res.data
      this.form.transferInTime = moment().locale('zh-cn').format('YYYY-MM-DD 00:00:00')
      this.getAllocateDetails({id: res.data.transferId})
    }).catch(() => {
      this.loading = false
    })
  },
  methods: {
    // 获取调拨详情
    getAllocateDetails(query) {
      detailsItem(query).then((res) => {
        this.form.allocateForm = res.data
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    handleSubmit() {
      // 校验表单
      this.$refs.ruleForm.validate((e) => {
        if (e) {
          // 提交表单
          this.loading = true
          const { projectPlanId, receiveState, recordId, transferInCondition, transferInTime, configProjectId, versionId } = this.form
          let param = {
            projectPlanId,
            receiveState,
            recordId,
            transferInCondition,
            transferInTime,
            waitRecordId: this.$route.query.messageId,
            configProjectId,
            versionId
          }
          transferInConfirm(param)
            .then((res) => {
              this.loading = false
              if (res.code === '0' || res.data.code === '0') {
                this.$message.success('调入成功！')
                window.postMessage('finish', window.location.origin)
                this.$multiTab.close()
              }
            })
            .catch(() => {
              this.loading = false
            })
        }
      })
    },
  }
}
</script>
